<template>
  <div style="padding:0 20px">
    <div class="shang">
      <div class="shang-top">
        <el-row style="height:32px;line-height:32px">
          <el-col :span="6">
            商品概况
            <i class="ivu-icon ivu-icon-ios-information-circle-outline"></i>
          </el-col>
          <el-col :span="18" align="right">
            <el-item label="投票日期：">
              <el-date-picker
                class="selWidth"
                v-model="timer"
                value-format="yyyy/MM/dd"
                format="yyyy/MM/dd"
                size="small"
                type="daterange"
                placement="bottom-end"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="onchangeTime"
              />
            </el-item>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="24" class="baseInfo">
        <el-col  class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper">
              <i class="iconfont iconshangpinliulanliang"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">商品浏览量</span>
              <span class="shang-q">{{shoopInfo.totalViews}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <el-col  class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper one">
              <i class="iconfont iconshangpinfangkeshu"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">商品访客数</span>
              <span class="shang-q">{{shoopInfo.totalVisitors}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <el-col class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper two">
              <i class="iconfont iconjiagoujianshu"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">加购件数</span>
              <span class="shang-q">{{shoopInfo.totalCartNumber}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <el-col class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper stree">
              <i class="iconfont iconxiadanjianshu"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">下单件数</span>
              <span class="shang-q">{{shoopInfo.total}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <el-col class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper">
              <i class="iconfont iconzhifujianshu"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">支付商品数</span>
              <span class="shang-q">{{shoopInfo.totalPaidNumber}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <el-col class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper one">
              <i class="iconfont iconzhifujine"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">支付金额</span>
              <span class="shang-q">{{shoopInfo.totalPaidMoney}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <el-col class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper two">
              <i class="iconfont iconchengbenjine"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">退款金额</span>
              <span class="shang-q">{{shoopInfo.totalRefundMoney}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <el-col class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper stree">
              <i class="iconfont icontuikuanjianshu"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">已支付订单数</span>
              <span class="shang-q">{{shoopInfo.totalPaid}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <el-col class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper">
              <i class="iconfont iconchengbenjine"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">订单商品数</span>
              <span class="shang-q">{{shoopInfo.totalNumber}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
        <el-col class="ivu-mb">
          <el-card :bordered="false" shadow="never" dis-hover :padding="12">
            <div slot="header" class="acea-row row-between-wrapper one">
              <i class="iconfont iconfangke-zhifuzhuanhuashuai"></i>
            </div>
            <div class="content">
              <span class="content-number spBlock">未支付订单数</span>
              <span class="shang-q">{{shoopInfo.totalUnPaid}}</span>
              <!-- <div>
                <span class="content-time"
                  >日环增长：
                  <i class="content-is" :class="Number(sales.dayRate)>=0?'up':'down'">{{ sales.dayRate }}%</i><i :class="Number(sales.dayRate)>=0?'el-icon-caret-top':'el-icon-caret-bottom'" />
                </span>
              </div> -->
            </div>
          </el-card>
        </el-col>
      </el-row>
      <echarts-from
        ref="visitChart"
        :yAxisData="yAxisData"
        :seriesData="series"
        :xAxis="xAxis"
        v-if="info"
        :legendData="legendData"
      ></echarts-from>
    </div>
    <div style="margin-top:20px;background-color:#fff;margin-bottom:20px">
      <div class="shang-top">
        <el-row style="height:50px;line-height:32px;border-bottom: 1px dotted #ccc;padding-left:10px">
          <el-col :span="6">
            商品排行
            <i class="ivu-icon ivu-icon-ios-information-circle-outline"></i>
          </el-col>
          <el-col :span="18" align="right">
            <el-item label="用户状态：" class="mr10">
              <el-select v-model="isShow"  class="selWidth">
                <el-option :value="item.id" maxlength="250" v-for="(item, index) in leiList" :key="index" :label="item.name"></el-option>
              </el-select>
            </el-item>
            <el-item label="投票日期：">
              <el-date-picker
                class="selWidth"
                v-model="timelist"
                value-format="yyyy/MM/dd"
                format="yyyy/MM/dd"
                size="small"
                type="daterange"
                placement="bottom-end"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="onchangeTimelist"
              />
            </el-item>
          </el-col>
        </el-row>
        <el-table
        v-loading="listLoading"
        :data="shangList"
        style="width: 100%;margin-top:10px"
        size="mini"
        ref="multipleTable"
      >
      <el-table-column label="商品图片" min-width="80" align="center">
          <template slot-scope="scope">
              <el-image
                style="width: 36px !important; height: 36px !important"
                :src="scope.row.cover"
                :preview-src-list="[scope.row.cover]"
              />
          </template>
        </el-table-column>
        <el-table-column
          label="商品名称"
          prop="name"
          min-width="100"
           align="center"
        />
        <el-table-column
          label="浏览量"
          prop="totalViews"
          min-width="100"
           align="center"
        />
        <el-table-column
          label="访客数"
          prop="visitors"
          min-width="100"
           align="center"
        />
        <el-table-column
          label="加购件数"
          prop="totalCartNumber"
          min-width="100"
           align="center"
        />
        <el-table-column
          label="总支付数"
          prop="totalNumber"
          min-width="100"
           align="center"
        />
        <el-table-column
          label="付款人数"
          prop="totalPaidNumber"
          min-width="100"
           align="center"
        />
        <el-table-column
          label="总金额"
          prop="totalMoney"
          min-width="100"
           align="center"
        />
        <el-table-column
          label="访客-支付转化率"
          prop="paidRate"
          min-width="100"
           align="center"
        >
        <template slot-scope="scope">
          <span>{{(scope.row.paidRate*100).toFixed(2)}}%</span>
        </template>
        
        </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { chartshangpinApi,chartshangListApi } from "@/api/dashboard";
import echartsFrom from '@/components/echarts/index';
export default {
  components: { echartsFrom },
  data() {
    return {
      listLoading:false,
      startTime: '',
      endTime: '',
      infoList: null,
      visitDate: "last30",
      series: [],
      xAxis: [],
      info: {},
      legendData: [],
      yAxisData: [],
      shoopInfo: {},
      timer: [],
      shangList:[],
      timelist:[],
      liststartTime:'',
      listendTime:'',
      leiList:[{id:'VIEWS',name:'浏览量'},{id:'VISITORS',name:'访客数'},{id:'CART_NUMBER',name:'加购件数'},{id:'PAID_MONEY',name:'支付金额'},{id:'ORDER_NUMBER',name:'订单数量'},{id:'PAID_RATE',name:'访客-支付转化率'},],
      isShow:'VIEWS',
    };
  },
  created() {
    this.getshijian()
    this.handleChangeVisitType();
    this.getseleList()
  },
  watch:{
    isShow(val){
      console.log(val)
      this.getseleList()
    }
  },
  methods: {
    //获取排行
    getseleList(){
      this.listLoading = true;
      let parmas={
        startTime:this.liststartTime,
        endTime:this.listendTime,
        sortBy:this.isShow
      }
      chartshangListApi(parmas).then(res=>{
        this.listLoading = false
        console.log("857",res)
        this.shangList=res
      }).catch(()=>{
        this.listLoading = false
      })
    },
    //获取前30天
    getshijian() {
      var date1 = new Date();
      var date2 = new Date(date1);

      //-30为30天前，+30可以获得30天后的日期
      date2.setDate(date1.getDate() - 30);

      //30天前（月份判断是否小于10，小于10的前面+0）
      var agoDay = `${date2.getFullYear()}/${
        date2.getMonth() + 1 < 10
          ? `0${date2.getMonth() + 1}`
          : date2.getMonth() + 1
      }/${date2.getDate()< 10 ? `0${date2.getDate()}` : date2.getDate()}`;

      //当前日期
      var nowDay = `${date1.getFullYear()}/${
        date1.getMonth() + 1 < 10
          ? `0${date1.getMonth() + 1}`
          : date1.getMonth() + 1
      }/${date1.getDate()< 10 ? `0${date1.getDate()}` : date1.getDate()}`;

      console.log(`30天前：${agoDay}`);
      console.log(`当前日期：${nowDay}`);
      let start=`${agoDay}`
      let end=`${nowDay}`
      console.log(start,end)
      this.timer=[start,end]
      this.startTime=start
      this.endTime=end
      this.liststartTime=start
      this.listendTime=end
      this.timelist=[start,end]
    },
    onchangeTime(e) {
      this.startTime = e ? e[0] : "";
      this.endTime = e ? e[1] : "";
      this.handleChangeVisitType()
    },
    onchangeTimelist(e){
      this.liststartTime= e ? e[0] : "";
      this.listendTime = e ? e[1] : "";
      this.getseleList()
    },
    handleChangeVisitType() {
      this.listLoading = true
      this.xAxis = [];
      this.legendData = [];
      let parmas = {
        startTime: this.startTime,
        endTime: this.endTime
      };
      chartshangpinApi(parmas).then(async res => {
        this.listLoading = false
        console.log("123", res);
        this.shoopInfo = res.dashboard;
        console.log(this.shoopInfo)
        this.info = res;
        let pices = [];
        let qualitys = [];
        let zhifu = [];
        let tuikuan = [];
        for (let key in res.series[0].data) {
          pices.push(Number(res.series[0].data[key]));
        }
        for (let key in res.xAxis) {
          this.xAxis.push(res.xAxis[key]);
        }
        for (let key in res.series[1].data) {
          qualitys.push(Number(res.series[1].data[key]));
        }
        for (let key in res.series[2].data) {
          zhifu.push(Number(res.series[2].data[key]));
        }
        for (let key in res.series[3].data) {
          tuikuan.push(Number(res.series[3].data[key]));
        }
        this.legendData = ["商品浏览量", "商品访客量", "支付金额", "退款金额"];
        this.series = [
          {
            name: "商品浏览量",
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#b37feb"
                    },
                    {
                      offset: 0.5,
                      color: "#b37feb"
                    },
                    {
                      offset: 1,
                      color: "#b37feb"
                    }
                  ]
                }
              }
            },
            yAxisIndex: 1,
            data: pices
          },
          {
            name: "商品访客量",
            type: "line",
            smooth: true,
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#ffab2b"
                    },
                    {
                      offset: 0.5,
                      color: "#ffab2b"
                    },
                    {
                      offset: 1,
                      color: "#ffab2b"
                    }
                  ]
                }
              }
            },
            yAxisIndex: 1,
            data: qualitys
          },
          {
            name: "支付金额",
            type: "bar",
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#1890ff"
                    },
                    {
                      offset: 0.5,
                      color: "#1890ff"
                    },
                    {
                      offset: 1,
                      color: "#1890ff"
                    }
                  ]
                }
              }
            },
            data: zhifu
          },
          {
            name: "退款金额",
            type: "bar",
            itemStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#00c050"
                    },
                    {
                      offset: 0.5,
                      color: "#00c050"
                    },
                    {
                      offset: 1,
                      color: "#00c050"
                    }
                  ]
                }
              }
            },
            data: tuikuan
          }
        ];
      }).catch(()=>{
        this.listLoading = false
      })
    }
  },
  mounted() {
    this.yAxisData = [
      {
        type: "value",
        name: "金额",
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: "#7F8B9C"
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#F5F7F9"
          }
        }
      },
      {
        type: "value",
        name: "数量",
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: "#7F8B9C"
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#F5F7F9"
          }
        }
        // axisLabel: {
        //     formatter: '{value} °C'
        // }
      }
    ];
  }
};
</script>
<style scoped lang="scss">
.ivu-mb {
  width: 20%;
  margin-bottom: 10px;
  display: flex;
}
.up,
.el-icon-caret-top {
  color: #f5222d;
  font-size: 12px;
  opacity: 1 !important;
}

.down,
.el-icon-caret-bottom {
  color: #39c15b;
  font-size: 12px;
  /*opacity: 100% !important;*/
}

.baseInfo {
   .el-card {
    display: flex;
    width: 100%;
    // margin-bottom: 30px;
    border: none;
  }
   .el-card__header {
    padding: 15px 10px !important;
    border: none ;
  }
.el-card__body {
    width: 70%;
    font-size: 15px;
    padding: 15px 20px 15px 5px !important;
  }
}

.content {
  &-number {
    font-size: 30px;
  }
  &-time {
    font-size: 16px;
    /*color: #8C8C8C;*/
  }
}
.acea-row {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  text-align: center;
  line-height: 32px;
  opacity: 0.7;
  background-color: #1890ff;
  justify-content: center;
}
.one {
  background-color: #00c050;
}
.two {
  background-color: #ffab2b;
}
.stree {
  background-color: #b37feb;
}
.iconfont {
  color: #fff;
}
.content-number {
  font-size: 12px;
}
.shang {
  padding: 20px;
  background-color: #fff;
}
.shang-top {
  padding: 10px;
  font-size: 16px;
}
.shang-q {
  font-size: 30px;
  margin: 10px 0;
  display: inline-block;
}

</style>
<style>
  .el-card__header{
  border: none ;
}
</style>
